<template>
  <s-layout title="用户管理" class="index-wrap">
    <view class="box">
      <view class="inpbox">
        <input
          type="text"
          v-model="user"
          placeholder="输入手机号搜索"
          class="custom-input"
        />
        <span @click="userbtn">搜索</span>
      </view>
      <view class="container">
        <scroll-view
          class="scroll-view"
          scroll-y="true"
          @scrolltolower="onScrollToLower"
        >
          <view
            class="w userlist"
            v-for="(item, index) in datalist"
            :key="index"
          > <view @click="toUserMoney(item)">
              <view>用户ID: {{ item.id }}</view>
              <view class="border-bottom"></view>
              <view class="userbox">
                <img
                  style="width: 150rpx; height: 150rpx"
                  src="https://picture-1326598115.cos.ap-nanjing.myqcloud.com/2025/06/175681ac93a19d4eff872362ee3b6c8969头像.png"
                  alt=""
                />
                {{ item.nickname }}
                {{ item.phone }}
              </view>
              <view style="display: flex; justify-content: space-between">
                <view>交易额:￥0.00</view>
                <view>积分:{{ item.integral }}</view>
                <view>订单数:0</view>
                <view>余额:￥{{ item.price }}</view>
              </view>
            </view>
            <view
              style="
                display: flex;
                justify-content: flex-end;
                margin-top: 30rpx;
              "
            >
              <view @click="czbtn(1, item.phone)" class="czbtn">扣款</view>
              <view @click="czbtn(2, item.phone)" class="czbtn">充值</view>
            </view>
          </view></scroll-view
        >
      </view>

      <!-- 弹窗 -->
      <view v-if="showPopup" class="popup-overlay" @click="closePopup">
        <view class="popup" @click.stop>
          <view class="popup-header">
            <view v-if="userstatus == 2">充值余额</view>
            <view v-if="userstatus == 1">扣除余额</view>
          </view>
          <view class="popup-content">
            <input
              type="number"
              placeholder="请填写充值余额"
              v-model="points"
            />
          </view>
          <view class="popup-footer">
            <button @click="closePopup">取消</button>
            <button @click="confirm">确认</button>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { reactive, computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import sheep from "@/sheep";

const showPopup = ref(false);
const points = ref("");
const note = ref("");
const user = ref("");
const datalist = ref("");

const closePopup = () => {
  showPopup.value = false;
};

const confirm = async () => {
  console.log("充值积分:", points.value);
  console.log("备注信息:", note.value);
  const res = await sheep.$api.order.operateBalance(
    {},
    {
      phoneNumber: userphone.value,
      amount: points.value,
      type: userstatus.value,
    }
  );
 
    uni.showToast({
      title: "操作成功",
      icon: "none",
      duration: 1500,
    });
    points.value = null
  datalist.value = []

  memberList();
  closePopup();
};
const userstatus = ref();
const userphone = ref();

const czbtn = (status, phone) => {
  userstatus.value = status;
  userphone.value = phone;
  showPopup.value = true;
};

const inpphone = ref();

const userbtn = () => {
  inpphone.value = user.value;
  console.log("userId:", user.value);
  const phoneRegex = /^1[3-9]\d{9}$/; // 中国大陆手机号正则表达式

  if (inpphone.value == "") {
    uni.redirectTo({
      url: "/pages/shoopbackground/usermanagement", // 替换为当前页面的路径
    });
  } else if (!phoneRegex.test(user.value)) {
    // 如果不是手机号，弹出提示框并返回
    uni.showToast({
      title: "请输入完整的手机号",
      icon: "none", // 不显示图标
      duration: 1500, // 提示框显示时长
    });
    return;
  } else if (inpphone.value != "") {
    datalist.value = [];
    memberList(1);
  }
};

const parmes = ref({
  page: 0,
  size: 10,
});

async function memberList(status) {
  const data = await sheep.$api.order.memberList(parmes.value, {
    phone: inpphone.value,
  });
  if (status == 1) {
    datalist.value = data.content;
  } else {
    datalist.value = [...datalist.value, ...data.content];
  }
  console.log(datalist.value, "zhji");
}

const onScrollToLower = () => {
  parmes.value.page = parmes.value.page + 1;
  memberList();
};

const toUserMoney = (item) => {
  uni.navigateTo({
    url: `/pages/shoopbackground/usermoney?id=${item.id}&money=${item.price}`,
  });
}

onLoad((options) => {
  memberList();
});
</script>

<style lang="scss" scoped>
.box {
  height: 90vh;
  width: 100%;
  background-color: #f7f7f7;
  // background: linear-gradient(to bottom, #d7eafe, #e4f4fe);
  box-sizing: border-box;
  padding-top: 10rpx;
}

.w {
  width: 94%;
  margin: auto;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 10rpx;
}
.userbox {
  width: 500rpx;
  height: 160rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 20rpx;
}
.container {
  width: 100%;
  height: 84vh; /* 设置容器高度 */
}
.scroll-view {
  width: 100%;
  height: 100%; /* 滚动视图的高度 */
}

.czbtn {
  width: 100rpx;
  height: 50rpx;
  border-radius: 20rpx;
  background-color: #ff6000;
  color: #fff;
  text-align: center;
  line-height: 50rpx;
  margin-left: 20rpx;
}
.inpbox {
  padding: 20rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 10rpx;
}
.custom-input {
  border: none;
  /* 设置背景颜色为灰色 */
  background-color: #f7f7f7;
  box-sizing: border-box; /* 确保宽度包含内边距 */
  width: 600rpx;
  height: 60rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding-left: 10rpx;
}
.userlist {
  height: 400rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.border-bottom {
  height: 2rpx;
  background-color: #eee;
  margin: 20rpx 0;
}

.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.popup {
  background-color: #fff;
  border-radius: 10rpx;
  width: 90%;
  max-width: 600rpx;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 2rpx solid #eee;
}

.popup-content {
  width: 570rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.popup-content input {
  width: 100%;
  margin-bottom: 20rpx;
  padding: 10rpx;
  border: 1rpx solid #eee;
  border-radius: 5rpx;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
  padding: 20rpx;
}

.popup-footer button {
  flex: 1;
  margin: 0 10rpx;
  background-color: #ff6000;
  color: #fff;
  border-radius: 5rpx;
}
</style>
